/*
 * @Author: thl t15945324431@163.com
 * @Date: 2024-01-26 16:15:07
 * @LastEditors: thl t15945324431@163.com
 * @LastEditTime: 2024-02-07 18:00:01
 * @FilePath: \cw_web\gl\src\views\call\order\orderList\components\details.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import GoBack from '@/components/TheGoBack'
import OrderStep from './orderStep';
import OrderInfo from './oderInfo';
import OrderTable from './orderTable';
import LinkedOrder from './linkedOrder';
import { callOrderDetail } from '@/request/callOrder/orderList.js'

export default class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      orderInfo: props.orderInfo, //数据信息
      orderId: '',
    }
  }
  componentDidMount() {
    let { id } = this.props.match.params
    if (id) {
      this.setState({ orderId: id }, () => { this.getData(id) })
    }
  }
  //组件更新时被调用 
  componentWillReceiveProps(newProps) {
    if (newProps.match.params.id !== this.state.orderId) {
      this.setState({ orderId: newProps.match.params.id }, () => {
        this.getData(newProps.match.params.id);  //当路由参数改变时，重新请求接口获取数据
      });
    }
  }
  getData = async (orderId) => {
    let res = await callOrderDetail({ orderId })
    if (res.code === 0 && res.data) {
      this.setState({ orderInfo: res.data, orderId }, () => {
        this.orderStepRef.getData() // 订单进度信息数据
        this.orderInfoRef.getData()// 订单信息数据
        this.orderInfoTableRef.getData() // 服务详情数据
        this.linkedOrderRef.getData(orderId) //关联订单数据更新
      })
    }
  }
  render() {
    const { orderInfo, orderId } = this.state
    return (
      <div className='p-layout-box'>
        <GoBack history={this.props.history} title='订单详情'></GoBack>
        {
          orderInfo && <div>
            <OrderStep ref={(ref) => this.orderStepRef = ref} orderInfo={orderInfo} history={this.props.history} getRequest={(v) => { this.getData(v) }}></OrderStep>
            <OrderInfo ref={(ref) => this.orderInfoRef = ref} orderInfo={orderInfo} getRequest={(v) => { this.getData(v) }}></OrderInfo>
            <OrderTable ref={(ref) => this.orderInfoTableRef = ref} orderInfo={orderInfo} history={this.props.history} getRequest={(v) => { this.getData(v) }}></OrderTable>
            <LinkedOrder ref={(ref) => this.linkedOrderRef = ref} orderInfo={orderInfo} history={this.props.history} getRequest={(v) => { this.getData(v) }}></LinkedOrder>
          </div>
        }
      </div>
    )
  }
}